<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="Steper Kuo">
	<!-- Status Bar Style -->
	<!-- Safari: black, black-translucent -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<!-- Chrome, Firefox OS and Opera -->
	<meta name="theme-color" content="#1ccacd">

	<title>Demo: background image with min-resolution</title>

	<!-- Favicons -->
	<link rel="apple-touch-icon" sizes="152x152" href="../../assets/img/apple-icon-152x152.png">
	<link rel="icon" type="image/png" sizes="16x16" href="../../assets/img/favicon-16x16.png">

	<!-- Style custom *** CSS -->
	<style data-toggle="previewCode" data-target="#demoWrap" data-init="auto" type="text/css">
		/* Demo's CSS here */
		.bg
		{
			width: 200px;
			height: 200px;
			background-size: 200px 200px;
			background: url(image.png) no-repeat center center;
		}
		@media (min-resolution: 1.5dppx)
		{
			.bg
			{
				background-size: 200px 200px;
				background-image: url(image@2x.png);
			}
		}
	</style>

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

</head>
<body>

<!-- Script Preload code *** JS -->
<!--<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.min.js?type=split-ssc"></script>-->

<!-- Script Fundebug code *** JS -->
<script src="https://js.fundebug.cn/fundebug.0.3.6.min.js"
				apikey="f3b60739271056d85641a316cd13350f5960922b510427e3ec514bc3f0a74ac5"></script>

<main>

	<!-- Demos -->
	<section id="demos">
		<div class="row">
			<div id="demoWrap" class="large-12 columns">
				<h3 id="overview">Overview</h3>
				<div data-toggle="previewCode" data-target="#demoWrap" data-collapse="on">
					<!--Demo's html here-->
					<div class="bg"></div>
				</div>
				<!--Introduction here-->
				<div data-toggle="previewCode" data-isCode="false" style="display: none;">
					<h3>Title:123543</h3>
					<span>preview without target</span>
				</div>
			</div>
		</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>
<!--<script src="../../assets/js/common.js"></script>-->

<!-- Script Config *** JS -->
<!--<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js?ignore=previewCode"></script>-->
<!--<script src="../../assets/js/yx-theme-config.js?ignore=previewCode"></script>-->
<script src="../../assets/js/yx-theme-config.js"></script>

<!-- Script Demo *** JS -->
<!--<script src="../previewCode.js?init=auto"></script>-->
<!--<script src="../previewCode.js" async></script>-->
<script id="tapId" data-toggle="previewCode" data-target="#demoWrap" data-tag="show" type="text/javascript">
	//	Demo's JS here
	//	1. To special items;
//	new PreviewCode(document.querySelectorAll('[data-toggle="previewCode"]'));
//	new PreviewCode(document.querySelector('[data-toggle="previewCode"]'));
//	new PreviewCode($('[data-toggle="previewCode"]'));
//	new PreviewCode($('#tapId'));

	//	2. To all items on body;
//	Theme original Highlight;
	var highlightOptions = {
		highlight: {
			css: '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css',
			js: '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'
		},
		initHighlight: initCustomHighlight
	};

	//	Custom the config your highlight plugin
	function initCustomHighlight()
	{
		hljs.configure({tabReplace: '****'});
		hljs.initHighlightingOnLoad();
	}

//	Default theme Owl
	// 	new PreviewCode();

//	Theme Original Highlight
//	new PreviewCode(null, highlightOptions);

</script>
</body>
</html>